import React, { Fragment, memo, useEffect, useState } from 'react';
import { Breadcrumb, Card, Input, Button, Table, Switch, Modal } from 'antd';
import { Link } from 'react-router-dom';
import { DeleteOutlined, EditOutlined, SettingOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { changeUserStatus, deleteUser, getUserList } from '../../api';
const { Search } = Input;
export default memo(
  function Users() {
    const [queryInfo, setQueryInfo] = useState({
      query: '',
      pagesize: 10,
      pagenum: 1
    })
    const [userTableData, setUserTable] = useState([])
    const [totalAll, setTotal] = useState(0)
    useEffect(() => {
      reqUserList()
    }, [])

    const reqUserList = async () => {
      const res = await getUserList(queryInfo);
      if (res) {
        setTotal(res.total)
        setUserTable(res.users)
      }
    }

    const searchClick = (value) => {
      console.log(value);
      reqUserList()
    }
    const changeMgState = (row) => {
      return async (
      ) => {
        row.mg_state = !row.mg_state
        const res = await changeUserStatus(row)
        if (!res) {
          reqUserList()
        }
      }
    }
    const removeById = (item) => {

      Modal.confirm({
        title: '提示',
        icon: <ExclamationCircleOutlined />,
        content: '此操作将永久删除该文件, 是否继续?',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          const res = await deleteUser(item.id);
          if (res) {
            const list = userTableData.filter(v => v.id !== item.id);
            setUserTable(list)
          }
        },
        onCancel: () => {
          console.log(2);
        }
      })


    }

    const userColumns = [
      {
        title: '#',
        width: '50px'
      },
      {
        title: '姓名',
        dataIndex: 'username',
      },
      {
        title: '邮箱',
        dataIndex: 'email',

      },
      {
        title: '电话',
        dataIndex: 'mobile',
      },
      {
        title: '角色',
        dataIndex: 'role_name',
      },
      {
        title: '状态',
        key: 'mg_state',
        width: '70px',
        render: (item) => <Switch defaultChecked={item.mg_state} onChange={changeMgState(item)} />
      },
      {
        title: '操作',
        key: 'id',
        width: '210px',
        render: (item) => {
          return <Fragment >
            <Button type='primary' onClick={() => {
              console.log(item);
            }}><EditOutlined /></Button>
            <Button type='primary' danger style={{ marginRight: '5px', marginLeft: '5px' }} onClick={() => {
              removeById(item)
            }}><DeleteOutlined /></Button>
            <Button type='primary' style={{ backgroundColor: '#e6a23c' }} onClick={() => {
              console.log(item);
            }}><SettingOutlined /></Button>
          </Fragment>
        }
      }
    ];
    const changePage = (pagenum, pageSize) => {

      setQueryInfo({
        query: "",
        pagenum,
        pageSize
      })
      reqUserList()
    }


    return <Fragment>
      <Breadcrumb style={{ marginBottom: '10px' }} >
        <Breadcrumb.Item>
          <Link to='/'>
            首页
          </Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          用户管理
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          用户列表
        </Breadcrumb.Item>
      </Breadcrumb>
      <Card title={
        <Fragment >
          <Search placeholder="请输入内容" allowClear onSearch={searchClick} style={{ width: 300 }} />
          <Button style={{ marginLeft: '20px' }} >添加用户</Button>
        </Fragment>
      }>

        <Table columns={userColumns} dataSource={userTableData}
          pagination={{ pageSize: queryInfo.pagesize, total: totalAll, defaultCurrent: queryInfo.pagenum, onChange: changePage }}
        />
      </Card>
    </Fragment>
  }
)